<template>
  <div class="w">
    <div id="content">
      <el-card>
        <div class="topic_header">
          <span class="topic_title">
            <span class="put_top" v-if="topicDetails.top === true">置顶</span>
            <span class="put_good" v-else-if="topicDetails.good === true">精华</span>
            <span>
              {{ this.topicDetails.title }}
            </span>
          </span>
          <div class="changes">
            <span>发布于{{ this.topicDetails.create_at | dateFormat }} </span>
            <span v-if="topicDetails.author">作者 {{ this.topicDetails.author.loginname }} </span>
            <span>{{ this.topicDetails.visit_count }}次浏览 </span>
            <span v-if="this.topicDetails.tab === 'share'">来自 分享</span>
            <span v-else-if="this.topicDetails.tab === 'ask'">来自 问答</span>
            <span v-else>来自 招聘</span>
          </div>
        </div>
        <div class="topic_content" v-html="topicDetails.content">
          {{ this.topicDetails.content }}
        </div>
      </el-card>
      <div class="replies">
        <div class="replies_header">
          <span>{{ this.topicDetails.reply_count }}回复</span>
        </div>
        <div class="replies_content">
          <div class="cell">
            456
          </div>
        </div>
      </div>
    </div>
    <div id="sidebar">
      <div class="panel">
        <div class="header">
          123
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topicDetails: [],
      userId: '',
      repliesList: []
    }
  },
  created() {
    this.getTopicDetails()
  },
  methods: {
    async getTopicDetails() {
      this.userId = this.$route.params.id
      const { data: res } = await this.$http.get(`topic/${this.userId}`)
      this.topicDetails = res.data
      this.repliesList = res.data.replies
      console.log(this.userId)
      console.log(this.topicDetails)
      console.log(this.repliesList)
    }
  }
}
</script>

<style lang="less" scoped>
.topic_title {
  font-size: 22px;
  font-weight: 700;
  margin: 8px 0;
  display: inline-block;
  vertical-align: bottom;
  width: 75%;
  line-height: 130%;
}
.put_good,
.put_top {
  background: #80bd01;
  padding: 2px 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  color: #fff;
  font-size: 12px;
  vertical-align: middle;
}
.changes {
  font-size: 12px;
  color: #838383;
  span:before {
    content: '•';
  }
}
.topic_content {
  margin-top: 5px;
  padding: 5px;
  border-top: 1px solid #e5e5e5;
}
.replies {
  .replies_header {
    padding: 10px;
    margin-top: 15px;
    border-radius: 3px 3px 0 0;
    background-color: #f6f6f6;
  }
  .replies_content {
    .cell {
      padding: 10px;
      background: #fff;
      border-top: 1px solid #f0f0f0;
    }
  }
}
</style>
